<template>
  <div class="loginForm">
    <el-form :model="employee" label-width="80px">
      <el-form-item label="邮箱">
        <el-input
          v-model="employee.email"
          style="width: 100px; margin-right: 50px"
        ></el-input>
        <el-button
          type="primary"
          @click="sendEmail"
          :disabled="emaildisabled"
          >{{ msg }}</el-button
        >
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="employee.verifycode"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="employee.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="employee.confirmpassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="modifyPassword">修改密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employee: {},
      emaildisabled: false,
      msg: "发送邮件",
      seconds: 5,
      timer: null,
    };
  },
  mounted() {},
  methods: {
    showEmailBuuton() {
      this.seconds--;
      this.msg = this.seconds + "秒以后点击重新发送";
      if (this.seconds == 0) {
        clearInterval(this.timer);
        this.seconds = 10;
        this.msg = "发送邮件";
        this.emaildisabled = false;
      }
    },
    sendEmail() {
      console.log("发送邮件--axios请求后端");
      this.emaildisabled = true;
      this.msg = this.seconds + "秒以后点击重新发送";
      this.timer = setInterval(this.showEmailBuuton, 1000);
    },
    modifyPassword() {
      console.log("修改密码");
    },
  },
};
</script>

<style>
.loginForm {
  padding-top: 100px;
  width: 500px;
  margin: 0px auto;
}
</style>